import React from 'react'
import { View, Image } from '@tarojs/components'
import './Waterfall.scss'
import {navigateTo} from "@/utils/navigation";

export type ImageItem = {
  id: number
  url: string
  height: number
}

interface WaterfallProps {
  columns: ImageItem[][]
}

const Waterfall: React.FC<WaterfallProps> = ({ columns }) => {
  return (
    <View className="columns">
      {columns.map((col, colIdx) => (
        <View key={colIdx} className="column">
          {col.map((item) => (
            <View key={item.id} className="image-box">
              <Image src={item.url} mode="widthFix" className="goods-image" />
              <View className="concern-box">
                <View className="concern">关注</View>
                <View className="concern-goods-name">{item.goods}</View>
              </View>
              <View className="goods-box" onClick={() => navigateTo('/pages/text-details/index')}>
              {/*<View className="goods-box" onClick={() => navigateTo('/pages/video-details/index')}>*/}
                <View className="merber-box">
                  <Image src={item.url} className="merber-photo"/>
                  <View className="merber-name">{item.name}</View>
                </View>
                <View className="like-box">
                  <Image className="like-img" src={`${item.like ? require(`../../assets/community/hearts-fill.png`): require(`../../assets/community/hearts.png`)}`}/>
                  <View className={`${item.like ? 'like-num' : ''}`}>{item.num}</View>
                </View>
              </View>

            </View>
          ))}
        </View>
      ))}
    </View>
  )
}

export default Waterfall
